﻿<%@ control language="C#" autoeventwireup="true" inherits="Mod_Slide_Slide, App_Web_fywtcwwi" %>


<script type="text/javascript">

    $(document).ready(function() {

        $('#col_left img').each(function(index) {
            $(this).hover(function() {
            $(this).addClass('imageHover');
            galleryIndex(index);

            }, function() {
                $(this).removeClass('imageHover');
            });
            
//            $(this).click(function() {

//                galleryIndex(index);
//            });

        });
        //Execute the slideShow
        slideShow();

    });

function slideShow() {

	//Set the opacity of all Components/slideshow/images to 0
	$('#gallery a').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	$('#gallery a:first').css({opacity: 1.0});
	
	//Set the caption background to semi-transparent
	$('#gallery .caption').css({opacity: 0.7});

	//Resize the width of the caption according to the image width
	$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
	
	//Get the caption of the first image from REL attribute and display it
	$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
	.animate({opacity: 0.7}, 400);
	
	//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('gallery()',6000);
	
}

function gallery() {
	
	//if no IMGs have the show class, grab the first image
	var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));

	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));

	changeImage(current, next);


}
function galleryIndex(index) {
    var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first'));

    var next = $('#gallery a:eq(' + index + ')');
    changeImage(current, next);
    



}

function changeImage(current, next) {
    //Get next image caption
    var caption = next.find('img').attr('rel');
    

    //Set the fade in effect for the next image, show class has higher z-index
    next.css({ opacity: 0.0 })
	.addClass('show')
	.animate({ opacity: 1.0 }, 1000);
	
	

    //Hide the current image
    current.animate({ opacity: 0.0 }, 1000)
	.removeClass('show');

    //Set the opacity to 0 and height to 1px
    $('#gallery .caption').animate({ opacity: 0.0 }, { queue: false, duration: 0 }).animate({ height: '1px' }, { queue: true, duration: 300 });

    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
    $('#gallery .caption').animate({ opacity: 0.7 }, 100).animate({ height: '100px' }, 500);

    //Display the content
    $('#gallery .content').html(caption);

}

</script>
<style type="text/css">
body{
	font-family:arial
}

.clear {
	clear:both
}


	#gallery a {
		float:left;
		position:absolute;
	}
	
	#gallery a img {
		border:none;
	}
	
	#gallery a.show {
		z-index:500
	}

	#gallery .caption {
		z-index:600; 
		background-color:#000; 
		color:#ffffff; 
		height:100px; 
		width:100%; 
		position:absolute;
		bottom:0;
	}

	#gallery .caption .content {
		margin:5px
	}
	
	#gallery .caption .content h3 {
		margin:0;
		padding:0;
		color:#1DCCEF;
	}
	.column {
	PADDING-BOTTOM: 10px;
	 MARGIN: 0px 5px;
	  PADDING-LEFT: 0px; 
	  PADDING-RIGHT: 0px; 
	  DISPLAY: inline; 
	  FLOAT: left; 
	  PADDING-TOP: 0px
}

	#col_left
	{
	 	width:50px;
	 	height:280px;
	 	float:left
	}
	#col_left img
	{
	 	padding: 3px
	 	
	 	
	}
	.imageHover
	{
	   /* padding: 5px;
        border:5px solid #000;
		*/
		background-color:White;
	}
#gallery {
	position:relative;
	height: 280px;
    width:570 px;
     FLOAT: left;
     MARGIN-RIGHT: 0px
  
    
}
 
</style>

<div class="column" id="col_left">
    <asp:Repeater ID="rp_ImageSlide" runat="server">
    <ItemTemplate>
         <img src="<%#Eval("LinkImage") %>" alt="<%#Eval("Title") %>" width="50" height="50" alt="" rel=""/>
		  <br />
    </ItemTemplate>
    </asp:Repeater>

</div>
<div class="column" id="gallery">
    <asp:Repeater ID="rp_ImageView" runat="server">
    <ItemTemplate>
        <a href="<%#Eval("LinkUrl") %>" class="show">
		    <img src="<%#Eval("LinkImage") %>" alt="<%#Eval("Title") %>" width="570" height="280" alt="" rel="<h3><%#Eval("Title") %></h3><%#Eval("Description") %> "/>
	    </a>
    </ItemTemplate>
    </asp:Repeater>

	<div class="caption"><div class="content"></div></div>
</div>
<div class="clear"></div>